<script>
import { VueCropper } from 'vue-cropper'
import 'vue-cropper/dist/index.css'
export default {
  name: 'Cropper',
  components: {
    VueCropper
  },
  data() {
    return {
      preview: ''
    }
  },
  props: {
    options: {
      type: Object,
      default: () => ({})
    },
    // 关闭
    close: {
      type: Function,
      default: void 0
    },
    // 保存截图
    save: {
      type: Function,
      default: void 0
    }
  },
  computed: {
    optionsFinal () {
      return Object.assign({},{
        img: "https://avatars2.githubusercontent.com/u/15681693?s=460&v=4",
        size: 1,
        full: false,
        // 裁剪生成图片的格式
        outputType: "png",
        // 图片是否可以移动
        canMove: true,
        // 固定截图框大小
        fixedBox: false,
        // 上传图片按照原始比例渲染
        original: false,
        // 是否开启滚轮放大缩小
        canScale: true,
        // 截图框能否拖动
        canMoveBox: true,
        // 是否默认生成截图框
        autoCrop: true,
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 200,
        autoCropHeight: 200,
        // 截图框是否被限制在图片里面
        centerBox: false,
        // 是否按照设备的dpr 输出等比例图片
        high: true,
        cropData: {},
        enlarge: 1,
        // 图片默认渲染方式 contain , cover, 100px, 100% auto
        mode: '50% auto',
        // 限制图片最大宽度和高度
        maxImgSize: 'max',
        // 限制最小区域,可传1以上的数字和字符串，限制长宽都是这么大
        limitMinSize: [50, 50],
        fixed: false,
        fixedNumber: [2, 1],
        fillCover: '',
        fillColor: '#000000',
        // 编辑框的宽
        boardWidth: 800,
        // 编辑框的高
        boardHeight: 600
      }, this.options)
    },
    boardWidth () {
      if (typeof this.optionsFinal.boardWidth === 'number') {
        return this.optionsFinal.boardWidth + 'px'
      } else {
        return this.optionsFinal.boardWidth
      }
    },
    boardHeight () {
      if (typeof this.optionsFinal.boardHeight === 'number') {
        return this.optionsFinal.boardHeight + 'px'
      } else {
        return this.optionsFinal.boardHeight
      }
    },
    // 预览和裁剪容器的高
    innerBoardHeight () {
      if (typeof this.optionsFinal.boardHeight === 'number') {
        return this.optionsFinal.boardHeight / 2 + 'px'
      } else {

      }
    }
  },
  methods: {
    handleSave () {
      this.$refs.cropper.getCropData(data => {
        this.save(data)
      })
      this.$refs.cropper.cancelScale()
      this.close()
    },
    // 逆时针旋转
    handleRotateLeft() {
      this.$refs.cropper.rotateLeft()
    },
    // 顺时针旋转
    handleRotateRight () {
      this.$refs.cropper.rotateRight()
    },
    // 水平翻转
    handleFlipHorizontal () {
      const img = new Image()
      img.src = this.optionsFinal.img
      img.onload = () => {
        this.$refs.cropper.checkOrientationImage(img, 4,img.width, img.height)
      }
    },
    // 垂直翻转
    handleFlipVertical () {},
    // 裁剪预览
    handlePreview () {
      this.$refs.cropper.getCropData(data => {
        this.preview = data
      })
    }
  }
}
</script>

<template>
  <div class="tx-cropper" :style="{ width: boardWidth }">
    <div class="tx-cropper-container" :style="{ height: boardHeight }" >
      <div class="tx-cropper-warp" :style="{ height: boardHeight }" >
        <VueCropper
          ref="cropper"
          v-bind="optionsFinal"
        />
      </div>
    </div>
    <div class="tx-cropper-action">
      <div class="tx-icon" @click="handleRotateLeft" title="逆时针旋转">
        <i class="iconfont icon-undo"></i>
      </div>
      <div class="tx-icon" @click="handleRotateRight" title="顺时针旋转">
        <i class="iconfont icon-redo"></i>
      </div>
      <!--      <div class="tx-icon" @click="handleFlipHorizontal" title="水平翻转">-->
      <!--        <i class="iconfont icon-shuipingfanzhuan"></i>-->
      <!--      </div>-->
      <!--      <div class="tx-icon" @click="handleFlipVertical" title="垂直翻转">-->
      <!--        <i class="iconfont icon-chuizhifanzhuan"></i>-->
      <!--      </div>-->
    </div>
    <div>
      <button class="tx-button tx-button-submit" @click="handleSave">保存</button>
    </div>
  </div>
</template>

<style scoped lang="less">
@import '../../css/index';
.tx-cropper {
  background-color: #FFFFFF;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  overflow: hidden;
  z-index: 99999;
}
.tx-cropper-container {
  //display: flex;
}
.tx-cropper-warp {
  overflow: hidden;
  flex: 1;
}
.tx-cropper-preview {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  user-select: none;
  background-color: #cccccc;
}
.tx-cropper-action {
  display: flex;
  justify-content: center;
  >div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: 8px;
    box-sizing: border-box;
    &:hover {
      background-color: #e9e9e9;
    }
  }
}
</style>